<template>
  <div class="container" id="container" style="z-index: 1"></div>
  <el-row>
    <el-col :span="12">
      <div id="newsTypePie" style="width: 100%; height: 350px;padding: 20px"></div>
    </el-col>
    <el-col :span="12">
      <div id="newsTypeBar" style="width: 100%; height: 350px;padding: 20px"></div>
    </el-col>
    
  </el-row>
    <!-- 添加中国地图容器 -->
    <div id="chinaMap" style="width: 100%; height: 500px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {onMounted, ref} from "vue";


const initNewsType = () =>{
  // 使用ajax方式从服务器获取数据，然后填充 newsTypeData
  let newsTypeData = [
    {name : '出津航班' , value : 2034} ,
    {name : '进津航班' , value : 1034} ,
    {name : '变更航班' , value : 1678} ,
    {name : '退票航班' , value : 1011}
  ]
  initNewsTypePie(newsTypeData)
  initNewsTypeBar(newsTypeData)
}
const initNewsTypePie = (chartsData) => {
  let myChart = echarts.init(document.getElementById('newsTypePie'));
  // 设置图表参数
  let option = {
    title: {text: '数量统计',left: 'center'},
    tooltip: { trigger: 'item'},
    legend: { orient: 'vertical', left: 'left'},
    series: [
      {
        name: '总数量',
        type: 'pie',
        radius: '50%',
        data: chartsData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option)
}

const initNewsTypeBar = (chartsData) => {
  let myChart = echarts.init(document.getElementById('newsTypeBar'));
  let option = {
    title: {
      text: '数量统计',
      left:'center'
    },
    tooltip: { trigger: 'item' },
    dataset : { source : chartsData } ,
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: { type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: { },
    series: [
      { name:'数量' ,type: 'bar'}
    ]
  };
  myChart.setOption(option);
}
onMounted(()=>{
  initNewsType();

})

</script>
<style scoped>
.container{
  max-height: 100vh;
  overflow-y: auto;
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>